<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多彩主题背景切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            height: 100vh;
            overflow: hidden;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        /* 预设主题背景 */
        .theme-ocean {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .theme-sunset {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .theme-forest {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .theme-purple {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        .theme-fire {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        }

        .theme-night {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        }

        .theme-rainbow {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        }

        .theme-matrix {
            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
        }

        .theme-gold {
            background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
        }

        .theme-aurora {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        /* 主题切换器面板 */
        .theme-switcher {
            position: fixed;
            top: 30px;
            right: 30px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .theme-switcher:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .theme-switcher h3 {
            color: white;
            margin-bottom: 18px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .theme-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .theme-btn {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .theme-btn:hover {
            transform: scale(1.1);
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        .theme-btn.active {
            border-color: #fff;
            border-width: 4px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }

        /* 主题按钮颜色 */
        .theme-btn.ocean { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .theme-btn.sunset { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .theme-btn.forest { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .theme-btn.purple { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
        .theme-btn.fire { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
        .theme-btn.night { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); }
        .theme-btn.rainbow { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
        .theme-btn.matrix { background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%); }
        .theme-btn.gold { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); }
        .theme-btn.aurora { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

        /* 控制按钮 */
        .control-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .control-btn {
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .control-btn.active {
            background: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
        }

        /* 自定义背景面板 */
        .custom-bg-panel {
            position: fixed;
            bottom: 30px;
            left: 30px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 1000;
            color: white;
            max-width: 300px;
            transform: translateX(-100%);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .custom-bg-panel.show {
            transform: translateX(0);
            opacity: 1;
        }

        .custom-bg-panel h4 {
            margin-bottom: 15px;
            font-size: 16px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .custom-input-group {
            margin-bottom: 15px;
        }

        .custom-input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
            font-weight: 500;
        }

        .custom-input-group input, .custom-input-group textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 13px;
            backdrop-filter: blur(5px);
        }

        .custom-input-group input::placeholder,
        .custom-input-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .custom-input-group input {
            height: 40px;
        }

        .custom-input-group textarea {
            height: 60px;
            resize: vertical;
        }

        .color-preview {
            width: 100%;
            height: 30px;
            border-radius: 6px;
            margin-top: 10px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* 切换按钮 */
        .toggle-custom-panel {
            position: fixed;
            bottom: 30px;
            left: 30px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 1001;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .toggle-custom-panel:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.25);
        }

        /* 信息显示 */
        .info-display {
            position: fixed;
            top: 30px;
            left: 30px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px);
            border-radius: 15px;
            padding: 15px 20px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 1000;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .theme-switcher {
                top: 20px;
                right: 20px;
                padding: 20px;
            }
            
            .theme-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
            }
            
            .theme-btn {
                width: 40px;
                height: 40px;
            }
            
            .custom-bg-panel {
                bottom: 20px;
                left: 20px;
                right: 20px;
                max-width: none;
            }
            
            .toggle-custom-panel {
                bottom: 20px;
                left: 20px;
            }
            
            .info-display {
                top: 20px;
                left: 20px;
                right: 20px;
                text-align: center;
            }
        }

        /* 加载动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.6s ease-out;
        }
    </style>
</head>
<body class="theme-ocean fade-in">
    <!-- 信息显示 -->
    <div class="info-display">
        <div>🌈 当前主题: <span id="current-theme">海洋蓝</span></div>
        <div style="margin-top: 5px; font-size: 12px; opacity: 0.9;">点击右侧面板切换主题</div>
    </div>

    <!-- 主题切换器 -->
    <div class="theme-switcher">
        <h3>🎨 选择主题</h3>
        <div class="theme-grid">
            <div class="theme-btn ocean active" data-theme="ocean" title="海洋蓝"></div>
            <div class="theme-btn sunset" data-theme="sunset" title="日落橙"></div>
            <div class="theme-btn forest" data-theme="forest" title="森林绿"></div>
            <div class="theme-btn purple" data-theme="purple" title="薰衣草"></div>
            <div class="theme-btn fire" data-theme="fire" title="粉色梦幻"></div>
            <div class="theme-btn night" data-theme="night" title="午夜黑"></div>
            <div class="theme-btn rainbow" data-theme="rainbow" title="温暖橙"></div>
            <div class="theme-btn matrix" data-theme="matrix" title="黑客帝国"></div>
            <div class="theme-btn gold" data-theme="gold" title="黄金色"></div>
            <div class="theme-btn aurora" data-theme="aurora" title="极光粉"></div>
        </div>
        
        <div class="control-buttons">
            <button class="control-btn" id="randomTheme">🎲 随机主题</button>
            <button class="control-btn" id="autoChange">⏰ 自动切换</button>
        </div>
    </div>

    <!-- 自定义背景面板切换按钮 -->
    <div class="toggle-custom-panel" id="toggleCustomPanel" title="自定义背景">
        ✏️
    </div>

    <!-- 自定义背景面板 -->
    <div class="custom-bg-panel" id="customBgPanel">
        <h4>🎨 自定义背景</h4>
        
        <div class="custom-input-group">
            <label>渐变色1 (起始颜色)</label>
            <input type="color" id="color1" value="#667eea">
        </div>
        
        <div class="custom-input-group">
            <label>渐变色2 (结束颜色)</label>
            <input type="color" id="color2" value="#764ba2">
        </div>
        
        <div class="custom-input-group">
            <label>渐变色3 (中间颜色，可选)</label>
            <input type="color" id="color3" value="#667eea">
        </div>
        
        <div class="custom-input-group">
            <label>方向角度 (例: 135deg)</label>
            <input type="text" id="direction" value="135deg" placeholder="例如: 45deg, 90deg, 135deg, 180deg">
        </div>
        
        <div class="custom-input-group">
            <label>自定义CSS渐变</label>
            <textarea id="customGradient" placeholder="例如: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">linear-gradient(135deg, #667eea 0%, #764ba2 100%)</textarea>
        </div>
        
        <div class="control-buttons">
            <button class="control-btn" id="applyCustom">应用自定义</button>
            <button class="control-btn" id="saveTheme">💾 保存主题</button>
        </div>
        
        <div class="color-preview" id="colorPreview"></div>
    </div>

    <script>
        // 主题系统类
        class ThemeSystem {
            constructor() {
                this.body = document.body;
                this.currentThemeSpan = document.getElementById('current-theme');
                this.themeButtons = document.querySelectorAll('.theme-btn');
                this.randomThemeBtn = document.getElementById('randomTheme');
                this.autoChangeBtn = document.getElementById('autoChange');
                
                // 主题配置
                this.themes = {
                    ocean: { name: '海洋蓝', class: 'theme-ocean', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                    sunset: { name: '日落橙', class: 'theme-sunset', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                    forest: { name: '森林绿', class: 'theme-forest', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
                    purple: { name: '薰衣草', class: 'theme-purple', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
                    fire: { name: '粉色梦幻', class: 'theme-fire', gradient: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' },
                    night: { name: '午夜黑', class: 'theme-night', gradient: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)' },
                    rainbow: { name: '温暖橙', class: 'theme-rainbow', gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
                    matrix: { name: '黑客帝国', class: 'theme-matrix', gradient: 'linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%)' },
                    gold: { name: '黄金色', class: 'theme-gold', gradient: 'linear-gradient(135deg, #f7971e 0%, #ffd200 100%)' },
                    aurora: { name: '极光粉', class: 'theme-aurora', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' }
                };
                
                this.currentTheme = 'ocean';
                this.autoChangeInterval = null;
                this.isAutoChanging = false;
                
                this.init();
            }
            
            init() {
                // 绑定主题按钮事件
                this.themeButtons.forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const theme = e.target.dataset.theme;
                        this.setTheme(theme);
                    });
                });
                
                // 绑定随机主题按钮
                this.randomThemeBtn.addEventListener('click', () => {
                    this.setRandomTheme();
                });
                
                // 绑定自动切换按钮
                this.autoChangeBtn.addEventListener('click', () => {
                    this.toggleAutoChange();
                });
                
                // 绑定自定义面板事件
                this.initCustomPanel();
                
                // 初始化颜色预览
                this.updateColorPreview();
                
                // 从本地存储加载保存的主题
                this.loadSavedTheme();
            }
            
            setTheme(themeName) {
                // 移除所有主题类
                Object.values(this.themes).forEach(theme => {
                    this.body.classList.remove(theme.class);
                });
                
                // 设置新主题
                if (this.themes[themeName]) {
                    this.body.classList.add(this.themes[themeName].class);
                    this.currentTheme = themeName;
                    this.currentThemeSpan.textContent = this.themes[themeName].name;
                    
                    // 更新按钮状态
                    this.themeButtons.forEach(btn => {
                        btn.classList.remove('active');
                        if (btn.dataset.theme === themeName) {
                            btn.classList.add('active');
                        }
                    });
                    
                    // 保存当前主题
                    this.saveCurrentTheme();
                }
            }
            
            setRandomTheme() {
                const themeKeys = Object.keys(this.themes);
                let randomTheme;
                
                // 确保不重复当前主题
                do {
                    randomTheme = themeKeys[Math.floor(Math.random() * themeKeys.length)];
                } while (randomTheme === this.currentTheme);
                
                this.setTheme(randomTheme);
                
                // 添加切换动画效果
                this.addSwitchEffect();
            }
            
            toggleAutoChange() {
                if (this.isAutoChanging) {
                    this.stopAutoChange();
                } else {
                    this.startAutoChange();
                }
            }
            
            startAutoChange() {
                this.isAutoChanging = true;
                this.autoChangeBtn.textContent = '⏸️ 停止自动';
                this.autoChangeBtn.classList.add('active');
                
                // 立即切换一次
                this.setRandomTheme();
                
                // 每5秒自动切换
                this.autoChangeInterval = setInterval(() => {
                    this.setRandomTheme();
                }, 5000);
            }
            
            stopAutoChange() {
                this.isAutoChanging = false;
                this.autoChangeBtn.textContent = '⏰ 自动切换';
                this.autoChangeBtn.classList.remove('active');
                
                if (this.autoChangeInterval) {
                    clearInterval(this.autoChangeInterval);
                    this.autoChangeInterval = null;
                }
            }
            
            addSwitchEffect() {
                // 添加切换时的视觉效果
                this.body.style.transform = 'scale(1.001)';
                setTimeout(() => {
                    this.body.style.transform = 'scale(1)';
                }, 200);
            }
            
            // 自定义背景面板相关方法
            initCustomPanel() {
                const toggleBtn = document.getElementById('toggleCustomPanel');
                const panel = document.getElementById('customBgPanel');
                const applyBtn = document.getElementById('applyCustom');
                const saveBtn = document.getElementById('saveTheme');
                const color1 = document.getElementById('color1');
                const color2 = document.getElementById('color2');
                const color3 = document.getElementById('color3');
                const direction = document.getElementById('direction');
                const customGradient = document.getElementById('customGradient');
                
                // 切换自定义面板显示
                toggleBtn.addEventListener('click', () => {
                    panel.classList.toggle('show');
                });
                
                // 应用自定义渐变
                applyBtn.addEventListener('click', () => {
                    this.applyCustomGradient();
                });
                
                // 保存自定义主题
                saveBtn.addEventListener('click', () => {
                    this.saveCustomTheme();
                });
                
                // 颜色选择器事件
                [color1, color2, color3].forEach((input, index) => {
                    input.addEventListener('input', () => {
                        this.updateCustomGradient();
                        this.updateColorPreview();
                    });
                });
                
                // 方向输入事件
                direction.addEventListener('input', () => {
                    this.updateCustomGradient();
                    this.updateColorPreview();
                });
                
                // 自定义CSS输入事件
                customGradient.addEventListener('input', () => {
                    if (customGradient.value.trim()) {
                        this.body.style.background = customGradient.value;
                        this.currentTheme = 'custom';
                        this.currentThemeSpan.textContent = '自定义主题';
                    }
                });
                
                // 初始化
                this.updateCustomGradient();
                this.updateColorPreview();
            }
            
            updateCustomGradient() {
                const color1 = document.getElementById('color1').value;
                const color2 = document.getElementById('color2').value;
                const color3 = document.getElementById('color3').value;
                const direction = document.getElementById('direction').value || '135deg';
                
                let gradient;
                if (color3 && color3 !== color1 && color3 !== color2) {
                    gradient = `linear-gradient(${direction}, ${color1} 0%, ${color2} 50%, ${color3} 100%)`;
                } else {
                    gradient = `linear-gradient(${direction}, ${color1} 0%, ${color2} 100%)`;
                }
                
                // 如果不是自定义模式，更新预览
                if (this.currentTheme !== 'custom') {
                    document.getElementById('customGradient').value = gradient;
                    this.body.style.background = gradient;
                }
            }
            
            applyCustomGradient() {
                const customGradient = document.getElementById('customGradient').value;
                if (customGradient.trim()) {
                    this.body.style.background = customGradient;
                    if (this.currentTheme !== 'custom') {
                        this.currentTheme = 'custom';
                        this.currentThemeSpan.textContent = '自定义主题';
                    }
                } else {
                    this.updateCustomGradient();
                }
            }
            
            updateColorPreview() {
                const color1 = document.getElementById('color1').value;
                const color2 = document.getElementById('color2').value;
                const preview = document.getElementById('colorPreview');
                
                // 创建简单的双色预览
                preview.style.background = `linear-gradient(135deg, ${color1} 0%, ${color2} 100%)`;
            }
            
            // 保存和加载主题
            saveCurrentTheme() {
                localStorage.setItem('selectedTheme', this.currentTheme);
                if (this.currentTheme === 'custom') {
                    const customGradient = document.getElementById('customGradient').value;
                    if (customGradient) {
                        localStorage.setItem('customThemeGradient', customGradient);
                    }
                }
            }
            
            saveCustomTheme() {
                const customGradient = document.getElementById('customGradient').value;
                if (customGradient.trim()) {
                    localStorage.setItem('customThemeGradient', customGradient);
                    localStorage.setItem('selectedTheme', 'custom');
                    this.currentTheme = 'custom';
                    this.currentThemeSpan.textContent = '自定义主题';
                    this.body.style.background = customGradient;
                    this.addSwitchEffect();
                }
            }
            
            loadSavedTheme() {
                const savedTheme = localStorage.getItem('selectedTheme');
                const savedGradient = localStorage.getItem('customThemeGradient');
                
                if (savedTheme && this.themes[savedTheme]) {
                    this.setTheme(savedTheme);
                } else if (savedTheme === 'custom' && savedGradient) {
                    this.body.style.background = savedGradient;
                    this.currentTheme = 'custom';
                    this.currentThemeSpan.textContent = '自定义主题';
                    document.getElementById('customGradient').value = savedGradient;
                    this.addSwitchEffect();
                }
            }
        }
        
        // 页面加载完成后初始化主题系统
        document.addEventListener('DOMContentLoaded', () => {
            new ThemeSystem();
        });
        
        // 键盘快捷键
        document.addEventListener('keydown', (e) => {
            // 按数字键1-9切换对应主题
            if (e.key >= '1' && e.key <= '9') {
                const themeIndex = parseInt(e.key) - 1;
                const themeButtons = document.querySelectorAll('.theme-btn');
                if (themeButtons[themeIndex]) {
                    themeButtons[themeIndex].click();
                }
            }
            
            // 按空格键随机切换主题
            if (e.code === 'Space' && e.target === document.body) {
                e.preventDefault();
                document.getElementById('randomTheme').click();
            }
        });
    </script>
</body>
</html>